import {
  IonContent,
  IonPage,
  IonInput,
  IonItem,
  IonButton,
  IonList,
  IonText,
  IonAlert,
  IonLabel,
  IonHeader,
  IonToolbar,
  IonTitle
} from '@ionic/react';
import React, { useState } from 'react';
import global_variable from '../shared/global_variable.json';

const ForgotPwd: React.FC = () => {

  const [phoneNum, setPhoneNum] = useState('');
  let [password, setPassword] = useState('');
  let [pwdAgain, setPwdAgain] = useState('');
  const [showAlert1, setShowAlert1] = useState(false);
  const [showAlert2, setShowAlert2] = useState(false);
  const [formSubmitted, setFormSubmitted] = useState(false);

  const login = async (e: React.FormEvent) => {
    e.preventDefault();
    setFormSubmitted(true);
    if (phoneNum && password && pwdAgain) {
      if (password === pwdAgain) {
        var urls = global_variable.url + "/CustomerAccountsApp/CreateOrEdit";
        // 请求数据
        let Account_fromData = { phoneNum: phoneNum, passWord: password, name: "editpwd" };
        let data = {
          method: 'POST',
          headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', },
          body: JSON.stringify(Account_fromData)
        };
        return fetch(urls, data)
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              setShowAlert1(true);
              window.location.href = global_variable.clientUrl + "/login";
            }
            else {
              setShowAlert2(true);
            }
          })
      }
    }
  };


  return (
    <IonPage id="login-page">
      <IonHeader style={{ textAlign: 'center', height: "5%", }}>
        <IonToolbar color="primary" >
          <IonTitle color='light'>找回密码</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent style={{ marginTop: '20px' }}>
        <form noValidate onSubmit={login}>
          {/* 提示框 */}
          <IonAlert
            isOpen={showAlert1}
            onDidDismiss={() => setShowAlert1(false)}
            header={'提示'}
            message={'找回密码成功!'}
            buttons={['确定']}
          />
          <IonAlert
            isOpen={showAlert2}
            onDidDismiss={() => setShowAlert2(false)}
            header={'提示'}
            message={'手机号码有误!'}
            buttons={['确定']}
          />
          <IonList>
            <IonItem>
              <IonLabel style={{ fontSize: '12px', color: "darkgray" }}>请输入手机号</IonLabel>
              <IonInput name="phoneNum" type="text" value={phoneNum} onIonChange={e => setPhoneNum(e.detail.value!)}
                required>
              </IonInput>
              {formSubmitted && phoneNum === "" && <IonText color="danger">
                <p style={{ fontSize: '12px' }} className="ion-padding-start">
                  请填写该字段
              </p>
              </IonText>}
            </IonItem>
            <IonItem>
              <IonLabel style={{ fontSize: '12px', color: "darkgray" }}>请输入新密码</IonLabel>
              <IonInput name="password" value={password} type="password" onIonChange={e => setPassword(e.detail.value!)}>
              </IonInput>
              {formSubmitted && password === "" && <IonText color="danger">
                <p style={{ fontSize: '12px' }} className="ion-padding-start">
                  请填写该字段
              </p>
              </IonText>}
            </IonItem>
            <IonItem>
              <IonLabel style={{ fontSize: '12px', color: "darkgray" }}>确认密码</IonLabel>
              <IonInput name="pwdAgain" value={pwdAgain} type="password" onIonChange={e => setPwdAgain(e.detail.value!)}>
              </IonInput>
              {password !== pwdAgain && pwdAgain !== "" && <IonText color="danger">
                <p style={{ fontSize: '12px' }} className="ion-padding-start">
                  两次输入密码不一致
              </p>
              </IonText>}
            </IonItem>
          </IonList>
          <IonButton type="submit" expand="block">确定</IonButton>
        </form>
      </IonContent>
    </IonPage>
  );
};

export default ForgotPwd;
